<template>
  <el-drawer v-model="visible" :title="title" :direction="direction" size="40%">
    <div class="drawer-view">
      <!-- 头部导航 -->
      <div class="header-nav">
        <div v-for="(nav, index) in navItems" :key="index" @click="scrollToSection(nav.id)"
          :class="{ 'active': activeNav === nav.id }" class="nav-item">
          {{ nav.name }}
        </div>
      </div>

      <!-- 生活服务 -->
      <div id="life-service" class="section">
        <h3 class="section-title">生活服务</h3>
        <div class="icon-grid">
          <div class="icon-item" v-for="(item, index) in lifeItems" :key="index">
            <div class="icon-wrapper">
              <img :src="item.icon" :alt="item.text" class="icon-img">
            </div>
            <span class="icon-text">{{ item.text }}</span>
          </div>
        </div>
      </div>

      <!-- 互动游戏 -->
      <div id="interactive-games" class="section">
        <h3 class="section-title">互动游戏</h3>
        <div class="icon-grid">
          <div class="icon-item" v-for="(item, index) in gameItems" :key="index">
            <div class="icon-wrapper">
              <img :src="item.icon" :alt="item.text" class="icon-img">
            </div>
            <span class="icon-text">{{ item.text }}</span>
          </div>
        </div>
      </div>

      <!-- 发现好物 -->
      <div id="discover-goods" class="section">
        <h3 class="section-title">发现好物</h3>
        <div class="sub-title">3C数码</div>
        <div class="icon-grid">
          <div class="icon-item" v-for="(item, index) in goodItems" :key="index">
            <div class="icon-wrapper">
              <img :src="item.icon" :alt="item.text" class="icon-img">
            </div>
            <span class="icon-text">{{ item.text }}</span>
          </div>
        </div>
      </div>

      <!-- 优惠权益 -->
      <div id="preferential-rights" class="section">
        <h3 class="section-title">优惠权益</h3>
        <div class="icon-grid">
          <div class="icon-item" v-for="(item, index) in rightsItems" :key="index">
            <div class="icon-wrapper">
              <img :src="item.icon" :alt="item.text" class="icon-img">
            </div>
            <span class="icon-text">{{ item.text }}</span>
          </div>
        </div>
      </div>
    </div>
  </el-drawer>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue'

// 定义组件属性
const props = defineProps({
  type: {
    type: String,
    default: 'all'
  }
})

// 导航项数据
const navItems = [
  { id: 'life-service', name: '生活服务' },
  { id: 'interactive-games', name: '互动游戏' },
  { id: 'discover-goods', name: '发现好物' },
  { id: 'preferential-rights', name: '优惠权益' }
]

// 生活服务数据
const lifeItems = [
  { text: "充值中心", icon: "https://m.360buyimg.com/babel/jfs/t20280623/318895/16/11602/17071/685a083bF80414613/1206780a710b810e.png" },
  { text: "家庭常备药", icon: "https://m.360buyimg.com/babel/jfs/t20280724/307942/4/19611/8481/6882db29F0e0d5362/479823308ad6b4e0.png" },
  { text: "云建站", icon: "https://m.360buyimg.com/babel/jfs/t20280623/319397/28/11290/14419/685a0a07F8e0e8868/166bc0591f18780c.png" },
  { text: "礼品卡", icon: "https://m.360buyimg.com/babel/jfs/t20280623/315746/28/11941/25614/685a6eddF5e1bcee4/1a93321a6c245165.png" },
  { text: "京东快递", icon: "https://m.360buyimg.com/babel/jfs/t20280626/318565/18/12242/6839/685e38acF7a5f395f/98bca322581d0798.png" },
  { text: "爱回收", icon: "https://m.360buyimg.com/babel/jfs/t20280622/297240/27/17234/15783/68591307F3f82e8b4/ec025c3834d1f736.png" },
  { text: "加油卡", icon: "https://m.360buyimg.com/babel/jfs/t20280623/306741/28/12067/8752/685a09aeF4f31129d/6c9e4c4078e4c407.png" },
  { text: "京东联名卡", icon: "https://m.360buyimg.com/babel/jfs/t20280623/304326/34/12989/27999/685a4d11F412da1e1/2d66d240702c5d30.png" },
  { text: "护士上门", icon: "https://m.360buyimg.com/babel/jfs/t20280707/314563/6/15331/5518/686d06e8Ff1f6536a/0f615146c09b3f5b.png" },
  { text: "在线医生", icon: "https://m.360buyimg.com/babel/jfs/t20280622/309085/33/11851/7223/68590a0dFbf08113f/e2bef1211ee8cbfb.png" }
]

// 互动游戏数据
const gameItems = [
  { text: '天天领好礼', icon: "https://m.360buyimg.com/babel/jfs/t20280622/306853/15/11818/10773/6858fa4fF21d6b9d9/ef257d4775808b7c.png" },
  { text: '游戏', icon: "https://m.360buyimg.com/babel/jfs/t20280623/309812/17/12177/10541/685a05d3F8f751f61/74fcb66e5f7314a9.png" }
]

// 发现好物数据
const goodItems = [
  { text: '游戏电竞', icon: "https://m.360buyimg.com/babel/jfs/t20280622/320994/18/11184/25855/6858e370F6abbc6e2/a328c281a498d697.png" },
  { text: '手机数码', icon: "https://m.360buyimg.com/babel/jfs/t20280622/302641/21/16471/4960/6858e898F975bc806/637491921edd7991.png" },
  { text: '配件中心', icon: "https://m.360buyimg.com/babel/jfs/t20280626/299492/22/18950/25131/685e676aF8ff17dac/e2c0ebc65a951cfc.png" },
  { text: '电脑馆', icon: "https://m.360buyimg.com/babel/jfs/t20280622/313849/8/11781/4331/6858f847F2d38a84e/518b00e7b7848b47.png" },
  { text: '京东图书', icon: "https://m.360buyimg.com/babel/jfs/t20280622/316586/19/11330/7530/6858ed6dF677debea/fbcdeba8bcfdb92a.png" },
  { text: '装机空间', icon: "https://m.360buyimg.com/babel/jfs/t20280622/316447/26/11577/4120/6858f99bFcdc17705/47b701368e16c534.png " }
]

// 优惠权益数据（新增）
const rightsItems = [
 { text: '游戏电竞', icon: "https://m.360buyimg.com/babel/jfs/t20280622/320994/18/11184/25855/6858e370F6abbc6e2/a328c281a498d697.png" },
  { text: '手机数码', icon: "https://m.360buyimg.com/babel/jfs/t20280622/302641/21/16471/4960/6858e898F975bc806/637491921edd7991.png" },
  { text: '配件中心', icon: "https://m.360buyimg.com/babel/jfs/t20280626/299492/22/18950/25131/685e676aF8ff17dac/e2c0ebc65a951cfc.png" },
  { text: '电脑馆', icon: "https://m.360buyimg.com/babel/jfs/t20280622/313849/8/11781/4331/6858f847F2d38a84e/518b00e7b7848b47.png" },
  { text: '京东图书', icon: "https://m.360buyimg.com/babel/jfs/t20280622/316586/19/11330/7530/6858ed6dF677debea/fbcdeba8bcfdb92a.png" },
  { text: '装机空间', icon: "https://m.360buyimg.com/babel/jfs/t20280622/316447/26/11577/4120/6858f99bFcdc17705/47b701368e16c534.png " }
]

const visible = ref(false)
const direction = ref('rtl')
const title = ref('全部频道')
const activeNav = ref('life-service')

// 滚动到指定区域
const scrollToSection = (sectionId) => {
  // 更新激活的导航项
  activeNav.value = sectionId

  // 获取目标元素
  const targetElement = document.getElementById(sectionId)
  if (targetElement) {
    // 获取滚动容器
    const scrollContainer = document.querySelector('.drawer-view')

    // 计算滚动位置（目标元素顶部相对于容器的位置）
    const targetPosition = targetElement.offsetTop - 70 // 减去导航栏高度

    // 平滑滚动
    scrollContainer.scrollTo({
      top: targetPosition,
      behavior: 'smooth'
    })
  }
}

// 监听滚动，更新激活的导航项
const handleScroll = () => {
  const scrollContainer = document.querySelector('.drawer-view')
  const scrollPosition = scrollContainer.scrollTop + 80 // 增加偏移量，使导航更灵敏

  // 遍历所有区域，判断当前滚动位置在哪
  navItems.forEach(nav => {
    const element = document.getElementById(nav.id)
    if (element) {
      const offsetTop = element.offsetTop
      const offsetBottom = offsetTop + element.offsetHeight

      if (scrollPosition >= offsetTop && scrollPosition < offsetBottom) {
        activeNav.value = nav.id
      }
    }
  })
}

onMounted(() => {
  // 使用nextTick确保DOM已渲染
  nextTick(() => {
    const scrollContainer = document.querySelector('.drawer-view')
    // 添加空值检查
    if (scrollContainer) {
      scrollContainer.addEventListener('scroll', handleScroll)

      // 清理函数
      return () => {
        scrollContainer.removeEventListener('scroll', handleScroll)
      }
    }
  })
})

const open = () => {
  visible.value = true
  title.value = props.type === 'all' ? '全部频道' :
    props.type === 'phone' ? '手机馆' : '频道'
}

defineExpose({ open })
</script>

<style scoped lang="scss">
.drawer-view {
  padding: 16px;
  max-height: calc(100vh - 60px);
  overflow-y: auto;
  scroll-behavior: smooth; // 平滑滚动
}

// 头部导航样式
.header-nav {
  display: flex;
  justify-content: space-between;
  padding: 0 8px 16px;
  margin-bottom: 8px;
  border-bottom: 1px solid #eee;
  position: sticky;
  top: 0;
  background-color: white;
  z-index: 10;

  .nav-item {
    font-size: 14px;
    color: #666;
    padding: 6px 10px;
    cursor: pointer;
    border-radius: 16px;
    transition: all 0.2s;

    &:hover {
      color: #e53e3e;
      background-color: #fff5f5;
    }

    &.active {
      color: #e53e3e;
      font-weight: 700;
      background-color: #fff5f5;
    }
  }
}

.section {
  margin-bottom: 24px;

  .section-title {
    font-size: 16px;
    font-weight: 700;
    color: #333;
    margin-bottom: 16px;
    padding-left: 8px;
  }

  .sub-title {
    font-size: 14px;
    color: #666;
    margin-bottom: 12px;
    padding-left: 8px;
  }

  .icon-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px 8px;
  }

  .icon-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: transform 0.2s;

    &:hover {
      transform: scale(1.05);
    }

    .icon-wrapper {
      width: 48px;
      height: 48px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 8px;

      .icon-img {
        width: 28px;
        height: 28px;
        object-fit: contain;
      }
    }

    .icon-text {
      font-size: 12px;
      color: #333;
      text-align: center;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 100%;
    }
  }
}
</style>
